<template>
  <section class="CustomersIndex-container">
    <customers-search ref="search" @onSearch="doSearch">
      <customers-list :customerss="customerss">
        <template slot="action-bar">
          <quick-action-bar>
            <quick-icon-button
              icon="icon-icon_xinzeng"
              tooltip="新增"
              @click="showAddDialog"
            />
          </quick-action-bar>
        </template>
        <template slot="row-action-bar" slot-scope="scope">
          <quick-action-bar>
            <quick-icon-button
              icon="icon-xiugai"
              tooltip="编辑"
              @click="showEditDialog(scope.row)"
            />
            <quick-icon-button
              icon="icon-shanchu"
              tooltip="删除"
              @click="deletecustomers(scope.row.id)"
            />
          </quick-action-bar>
        </template>
      </customers-list>
    </customers-search>

    <customers-add ref="addDialog" @added="refresh" />
    <customers-edit ref="editDialog" @edited="refresh" />
  </section>
</template>

<script>
import CustomersSearch from "./CustomersSearch.vue";
import CustomersList from "./CustomersList";
import CustomersAdd from "./CustomersAdd.vue";
import CustomersEdit from "./CustomersEdit.vue";
import _api from "../../common/api/customer";

export default {
  components: {
    CustomersSearch,
    CustomersList,
    CustomersAdd,
    CustomersEdit,
  },
  data() {
    return {
      customerss: [],
    };
  },
  methods: {
    doSearch(customerss) {
      this.customerss = customerss;
    },

    showAddDialog() {
      this.$refs.addDialog.showDialog();
    },

    showEditDialog(customers) {
      console.log(customers);
      console.log(this.$refs.editDialog);
      this.$refs.editDialog.showDialog(customers);
    },

    showSetRolesDialog(customers_id) {
      this.$refs.setRolesDialog.showDialog(customers_id);
    },

    deletecustomers(id) {
      console.log(id);
      this.$confirm("你确定删除此项吗？", "确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await _api.deleteAsync(parseInt(id));
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.refresh();
          } catch (error) {
            this.$message({
              type: "info",
              message: `删除失败，${error}`,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    refresh() {
      this.$refs.search.getCustomers();
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.CustomersIndex-container {
  height: 100%;
}
</style>